<template>
	<view class="uni-stepper-bar" :style="{'height': ButtonSize}" @click.stop>
		<view class="uni-stepper-minus uni-stepper-item" :style="{'width': ButtonSize, 'height': ButtonSize}" @click="setMinus">-</view>
		<input class="uni-stepper-num uni-stepper-item uni-bg-color" v-model="num" @input="setInput" type="number" :style="{'width': InputWidth}" />
		<view class="uni-stepper-add uni-stepper-item" :style="{'width': ButtonSize, 'height': ButtonSize}" @click="setAdd">+</view>
	</view>
</template>

<script>
	export default {
		name: 'UniStepperBar',
		title: '计数器',
		props: {
			buttonSize: {
				type: [Number, String],
				default: 48
			},
			inputWidth: {
				type: [Number, String],
				default: 70
			},
			val: {
				type: [Number, String],
				default: ''
			}
		},
		model: {
			prop: 'val',
			event: 'gerValue'
		},
		computed: {
			ButtonSize() {
				return typeof this.buttonSize === 'number'?`${this.buttonSize}rpx`:this.buttonSize
			},
			InputWidth() {
				return typeof this.inputWidth === 'number'?`${this.inputWidth}rpx`:this.inputWidth
			}
		},
		methods: {
			setMinus() {
				this.num--
				this.num = this.num < 0?0: this.num
				this.$emit('gerValue', this.num)
			},
			setAdd() {
				this.num++
				this.$emit('gerValue', this.num)
			},
			setInput(event) {
				this.num = event.mp.detail.value
				this.$emit('gerValue', this.num)
			}
		},
		data() {
			return {
				num: 0
			};
		},
		mounted() {
			this.num = this.val || 0
		}
	}
</script>

<style lang="scss" scoped>
	.uni-stepper-bar{
		display: flex;
		align-items: center;
		border:solid 2upx #999999;
		border-radius: 5upx;
		overflow: hidden;
		.uni-stepper-minus{
			border-right:solid 2upx #999999;
			background: #f6f6f6;
		}
		.uni-stepper-add{
			border-left:solid 2upx #999999;
			background: #f6f6f6;
		}
		.uni-stepper-item{
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.uni-stepper-num{
			flex: 1;
			height: 100%;
			text-align: center;
		}
	}
</style>
